<!--此组件用于小标题-->

<template>
    <div class="mycard"> 
      
       
        <el-card class="item_card" :body-style="{ padding: '0px' }">
            <div class="item_img">
                <img :src="imgurls+image" alt="" class="image">
            </div>
            <div class="item_content">
            <div class="item_title">
                <span>{{name}}</span>
            </div>
            <!-- 拍卖标的1 2 6 -->
            <div class="item_money" v-if="item.state !== '3'">
                <p>
                <span v-if="item.state == '1'||item.state == '6'">起拍价</span>
                <span v-else>当前价</span>
                <span>{{startprice}}元</span>
                </p>
                <div class="item_money_time">
                <!--  -->
                <p v-if="item.state == '2'||item.state == '6'">预计{{time}}结束</p>
                <p v-else>预计{{time}}开始</p>
                <!--  -->
                <p class="start greenBtn" v-if="item.state == '1'">即将开始</p>
                <p class="start yellowBtn" v-else-if="item.state == '6'">已暂停</p>
                <p class="start redBtn" v-else>进行中</p>
                </div>
                
            </div>  
            <!-- 成交案例 3 -->
            <div class="item_money" v-else>
                <p>
                <span>成交价</span>
                <span>{{item.bidprice}}元</span>
                </p>
                <div class="item_money_time">
                <p>{{item.bid_time}}结束</p>
                <p class="start redBtn">已成交</p>
                </div>
                
            </div>  
                <div class="item_bottom clearfix">
                    <p>{{item.viewcount}}次围观</p>
                    <p>{{item.history_count}}次出价</p>
                <!-- <el-button type="text">操作按钮</el-button> -->
                </div>
            </div>
        </el-card> 
       
    </div>
  </template>
  
  <script>
  export default {
    name: 'Title',
    props: {
      // 传递字体大小
      fontSize: {
        type: [Number, String],
        default: 14,
      },
      // 传递字体粗细
      fontWeight: {
        type: [Number, String],
        default: 400,
      },
      // 传递标题内容
      content: {
        type: String,
        required: true,
      },
  
    },
  };
  </script>
  
  <style lang="less" scoped>
    .mycard{
        position: relative;
        display: inline-block;
        width: 280px;
        height: 348px;
        text-decoration: none;
        // .link_wrap:hover{
          // border: 2px solid #67C23A;
        // }
        .item_card{
          .item_img{
            height: 190px;
            .image {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }
          }
          
          .item_content{
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;           
            .item_title{
              height: 56px;
              font-size: 18px;
              
            }
            .item_money{
              font-size: 14px;
              color: rgb(153, 153, 153);
              .item_money_time{
                p{
                  display: inline-block;  
                }
                
                p:last-of-type{
                  font-size: 12px;
                  font-weight: 400;
                  position: absolute;
                  right: 0px;
                  width: 70px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 12px 0px 0px 12px;
                  // background-color: #67C23A;
                  color: #fff;
                }
              }
            }
            .item_money{
              p{
                margin-bottom: 10px;
              }
            }
            .item_bottom{
              height: 32px;
              border-top: 1px solid rgb(237, 237, 237);
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: rgb(153, 153, 153);
              font-size: 12px;
            }
          }
        }
        .item_card:hover{
            border: 1px solid #DF0000;
          }

        
        
      }
  
  </style>
  